<template>
	<view class="body-wrap">
		<!-- 课程列表 -->
		<view class="course-card-list-wrap">
			<!-- 课程卡片 -->
			<view class="course-card-list">
			<template>
				<u-search :show-action="true" actionText="查询" :animation="true" placeholder="请输入您想观看的课程" v-model="courseName" @search="likeCourse(courseName)"></u-search>
			</template>
			<view class="course-card-wrap box-shadow" @click="checkThisCourse(item.courseId)" v-for="(item,index) in allCourseList">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<view class="course-image-wrap bg-purple-light">
						<u-row customStyle="margin-bottom: 15px">
							<u-col span="12">
								<view class="course-image-wrap bg-purple-light" style="height: 150px;">
									<div style="float: left;  height: 200px; margin-top: 20px;" >
										<u-image src="/static/img/school_logo2.png"
											mode="aspectFill" width="250rpx" height="200rpx"
											radius="10"  style=" margin-top: 40rpx;">
										</u-image>
									</div>
									<div style="float: right;margin-top: 45px;" >
										<view>课程名称:{{item.courseName}}</view>
										<view style="width: 200px;">课程简介:{{item.courseAbout}}</view>
										<view>课程时长:{{item.courseMin}}小时
										</view>
									</div>
								</view>
							</u-col>
						</u-row>
		
					</view>
				</u-col>
			</u-row>
				
			</view>
			</view>
		</view>
		
		<!-- loadmore -->
		<u-loadmore
			marginTop="0"
			:line="true"
			:status="loadmore.status"
			:loading-text="loadmore.loadingText"
			:loadmore-text="loadmore.defaultText"
			:nomore-text="loadmore.nomoreText"
		/>

	</view>
</template>

<script>
export default {
	data() {
		return {
			courseName: '',
			allCourseList:[],
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currnetPage: 1
			},
			courseUrl:{
				likeAndAllCourseUrl:"/course/course/list",
			}
		}
	},
	methods: {
		//课程的模糊查询
		likeCourse(courseName){
			this.$axios.get(this.courseUrl.likeAndAllCourseUrl+"?courseName="+courseName).then((res)=>{
				if(res.data.result.records){
					this.allCourseList=res.data.result.records;
				}
			})	
		},
		//点击当前课程，进入到当前课程的展示信息
		checkThisCourse(courseId){
			uni.navigateTo({
				url:"/pages/index/course/detail?courseId="+courseId+"&courseType=0"
			})
		}
	},
	mounted(){
			this.$axios.get(this.courseUrl.likeAndAllCourseUrl).then((res)=>{
				if(res.data.result.records){
					this.allCourseList=res.data.result.records;
				}
			})
		}
}
</script>

<style lang="scss">
	.body-wrap {
		background-color: #fefefe;
	}
	// 学校列表外包裹
	.course-card-list-wrap {
		background-color: #fefefe;
		position: relative;
		.card-header {
			width: 100%;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			// background-image: url('https://cdn.huiwenhuiyi.com/uploads/20220317/Ftx-VNayUIGQBHazoH7zxcp_Rf3Y.png');
			// background-repeat: no-repeat;
			// background-size: 100%;
			.title {
				margin-top: -100rpx;
				font-size: $u-p;
				color: #FFFFFF;
				font-weight: bold;
				padding: 24rpx;
			}
		}
	
		.course-card-list {
			padding: 24rpx;
			position: relative;
			.course-card-wrap {
				padding: 24rpx;
				display: flex;
				align-items: flex-start;
				border-radius: 20rpx;
				background-color: #ffffff;
				margin-bottom: 24rpx;
	
				.course-image-wrap {
					margin-right: 24rpx;
				}
	
				.course-info-wrap {
					height: 195rpx;
					display: flex;
					flex-direction: column;
					align-items: left;
					justify-content: space-between;
	
					.course-title-wrap,
					.course-rate-wrap,
					.course-location-wrap {
						display: flex;
						align-items: center;
						justify-content: left;
	
						.course-title {
							font-size: $u-p;
							font-weight: bold;
						}
					}
	
					.course-title-wrap {
						.tag {
							width: 36rpx;
							padding: 4rpx 0rpx;
							text-align: center;
							border-radius: 6rpx;
							color: #ffffff;
							font-size: 20rpx;
							line-height: 24rpx;
							margin-left: 5rpx;
						}
					}
	
					.course-rate-wrap {
						display: flex;
						justify-content: left;
						text {
							color: $u-content-color;
						}
					}
	
					.course-location-wrap {
						text {
							color: $u-content-color;
						}
					}
	
					.school-name{
						display: flex;
						align-items: center;
						color: $u-content-color;
						.custom-icon {
							color: $u-primary-color;
						}
						.name {
							margin-left: 5rpx;
						}
						font-size: $u-p3;
					}
				}
			}
		}
	}
</style>
